<template>
  <div class="dashboard-editor-container">
    <message></message>
    <panel-group />
    <el-row>
      <el-col :span="22">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
          <el-form-item label="所属公司" prop="compony"  v-show="componyList.length > 0">
            <el-select v-model="queryParams.deptId" filterable placeholder="请选择所属公司" clearable style="width: 320px">
              <el-option v-for="item in componyList" :value="item.deptId" :label="item.deptName"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="起止时间" prop="date">
            <el-date-picker
              v-model="queryParams.date"
              type="monthrange"
              format="yyyy-MM"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="2" style="text-align: right">
<!--        <el-button type="primary" icon="el-icon-download" size="mini" >导出</el-button>-->
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :lg="8" v-for="charts in echartList">
        <div class="chart-wrapper">
          <div class="title">{{ charts.title }}</div>
          <div class="chart">
           <component :is="charts.chart" :chartData="charts.data" :title="charts.title" />
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import moment from 'moment';
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import PieChart1 from './dashboard/PieChart1'
import PieChart2 from './dashboard/PieChart2'
import BarChart from './dashboard/BarChart'
import BarChart1 from './dashboard/BarChart1'
import message from './dashboard/message'
import BarChartS from "./dashboard/BarChartS.vue";
import {getHouseStatus, getInspection, getContract, getContractWarning, getContractMoney, getWorkOrder, listCompany } from '@/api/business/index'

export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart,
    BarChart1,
    BarChartS,
    message
  },
  data() {
    return {

      queryParams: {
        data: [],
        deptId: ''
      },
      componyList: [],
      echartList: [
        {
          title: '房产状态',
          chart: PieChart1,
          data: [],
        },
        {
          title: '巡检工单',
          chart: PieChart,
          data: [],
        },
        {
          title: '保养维修工单',
          chart: BarChartS,
          data: {
            stack: 'vistors',
            xAxisData: [],
            yAxisData: [
              {
                name: '保养工单',
                data: []
              },
              {
                name: '维修工单',
                data: []
              },
            ]
          },
        },
        {
          title: '合约签约分析',
          chart: LineChart,
          data: {
            xAxisData: [],
            yAxisData: []
          },
        },
        {
          title: '合同到期预警',
          chart: PieChart2,
          data: [],
        },
        {
          title: '合同金额分析',
          chart: BarChart1,
          data: {
            xAxisData: [],
            yAxisData: []
          },
        }
      ]
    }
  },
  created() {
    listCompany().then(res => {
      this.componyList = res.data
    })
  },
  mounted() {
    this.getData()
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      let params = {}
      if(this.queryParams.date && this.queryParams.date.length > 0) {
        params.startDate = moment(this.queryParams.date[0]).startOf('month').format('YYYY-MM-DD HH:mm:ss')
        params.endDate = moment(this.queryParams.date[1]).endOf('month').format('YYYY-MM-DD HH:mm:ss')
      } else {
        params.startDate = ''
        params.endDate = ''
      }
      params.deptId = this.queryParams.deptId
      this.getData(params)
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    getData(param = {}) {
      getHouseStatus(param).then(res => {
        if(res.data && res.data.length > 0) {
          let data = res.data.map(item => {
            return {
              value: Number(item.commonNum),
              name: item.commonStatus
            }
          })
          this.echartList[0].data = data
        }

      })
      getInspection(param).then(res => {
        if(res.data && res.data.length > 0) {
          let data = res.data.map(item => {
            return {
              value: Number(item.commonNum),
              name: item.commonStatus
            }
          })
          this.echartList[1].data = data
        }
      })
      getWorkOrder(param).then(res => {
        if(res.data && res.data.length > 0) {
          let x = [];
          let y1 = [];
          let y2 = [];
          res.data.forEach(item => {
            x.push(item.commonMonth)
            y1.push(Number(item.inspectionCount))
            y2.push(Number(item.maintenanceCount))
          })
          this.echartList[2].data.xAxisData = x
          this.echartList[2].data.yAxisData[0].data = y1
          this.echartList[2].data.yAxisData[1].data = y2
        }
      })
      getContract(param).then(res => {
        if(res.data && res.data.length > 0) {
          let x = [];
          let y = [];
          res.data.forEach(item => {
            x.push(item.commonMonth)
            y.push(Number(item.commonNum))
          })
          this.echartList[3].data.xAxisData = x
          this.echartList[3].data.yAxisData = y
        }
      })
      getContractWarning(param).then(res => {
        if(res.data && res.data.length > 0) {
          let data = res.data.map(item => {
            return {
              value: Number(item.commonNum),
              name: item.commonStatus
            }
          })
          this.echartList[4].data = data
        }
      })
      getContractMoney(param).then(res => {
        if(res.data && res.data.length > 0) {
          let x = [];
          let y = [];
          res.data.forEach(item => {
            x.push(item.commonMonth)
            y.push(Number(item.totalRent))
          })
          this.echartList[5].data.xAxisData = x
          this.echartList[5].data.yAxisData = y
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 20px;
  background-color: #ffffff;
  position: relative;
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 20px;
    border-radius: 20px;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);
    .title {
      font-size: 16px;
      font-weight: 600;
      height: 30px;
      line-height: 30px;
      margin-bottom: 10px;
      color: #333333;
      font-weight: bold;
      position: relative;
      text-indent: 15px;
      &::before {
        width: 6px;
        height: 20px;
        background: #81bbff;
        position: absolute;
        top: 5px;
        left: 0;
        content: "";
      }
    }
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
